<template>
  <div>
    <li
      v-for="item in 5"
      :key="item"
      @click="handelClick(item)"
      :class="{ active: item == current }"
    >
      {{ item }}
    </li>
  </div>
</template>

<script>
export default {
  data() {
    return {
      current: 1,
    };
  },
  methods: {
    handelClick(id) {
      console.log(id);
      this.current = id;
    },
  },
};
</script>

<style lang="less" scoped>
li {
  line-height: 50 / 360 * 100vw;
  &.active {
    color: red;
  }
}
</style>
